function generateTableOfContents() {
    const contentArea = document.querySelector('.content-area');
    const tocContainer = document.querySelector('.table-of-contents');
    const tocList = document.createElement('ul');
    tocContainer.innerHTML = '<h2>目录</h2>';
    tocContainer.appendChild(tocList);

    const headers = Array.from(contentArea.querySelectorAll('h1, h2, h3, h4, h5, h6'))
                         .map((header, i) => ({ level: parseInt(header.tagName.slice(1)), text: header.textContent, element: header }));

    headers.forEach((headerData) => {
        const li = document.createElement('li');
        const link = document.createElement('a');
        link.href = `#${headerData.element.id}`;
        link.textContent = headerData.text;
        link.addEventListener('click', function(e) {
            e.preventDefault();
            headerData.element.scrollIntoView({ behavior: 'smooth' });
        });

        // 设置缩进，乘以10px，级别越高，缩进越大
        li.style.paddingLeft = `${(headerData.level - 1) * 20}px`;

        li.appendChild(link);
        tocList.appendChild(li);
    });
}
